<template>
  <div v-if="type==1" class="layout-index">
    <layout-navbar-index />
    <div class="layout-content">
      <div class="con">
        <router-view :key="$route.fullPath" />
      </div>
    </div>
  </div>
  <div v-else class="layout-paper">
    <layout-navbar-paper />
    <div class="layout-content">
      <div class="paper"></div>
      <div class="con">
        <router-view :key="$route.fullPath" />
      </div>
    </div>
  </div>
</template>

<script>
import LayoutNavbarIndex from "./LayoutNavbarIndex";
import LayoutNavbarPaper from "./LayoutNavbarPaper";

export default {
  name: "Layout",
  components: {
    LayoutNavbarIndex,
    LayoutNavbarPaper
  },
  data() {
    return {
      type: 1,
    }
  },
  watch: {
    '$route.path': function(newVal) {
      if(newVal.includes('index')) {
        this.type = 1
      } else {
        this.type =2
      }
    }
  },
  created() {
    if(this.$route.path.includes('index')) {
      this.type = 1
    } else {
      this.type =2
    }
  }
};
</script>

<style lang="less" scoped>
.layout-index {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  display: flex;
  .con {
    min-width: 1200px;
  }
}
.layout-paper {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  display: flex;
  .con {
    min-width: 800px;
  }
}
.layout-content {
  flex: 1;
  overflow-x: auto;
  display: flex;
  .paper {
    width: 440px;
    height: 100%;
    background-image: url('../assets/imgs/navside_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    flex-shrink: 0;
  }
}
</style>
